<template>
  <div class="process1">
    <img @click="entersmall" src="@/static/error.png" class="baoxiangstyle" alt="">
    <div class="awardword">错太多了哦</div>

  </div>
</template>

<script setup>
import config from '../../config/config.js'
import { ref, onMounted } from 'vue'
import { useRoute,useRouter } from 'vue-router'
import api from '@/api/user'
const route = useRoute();
const router=useRouter();
const baoxiangstyle = ref("baoxiang roate");
const rewarddetailstyle = ref("");
import { useAuthStore } from '../../store/index';
const store = useAuthStore();
onMounted(() => {
  store.settopics([]);
  store.resetnowtopic();
  store.setcorrectnum(0);
  if (store.nowlevel == route.query.proccess) {
    api.putprocess({
      remainingLevels: 0
    }).then((res) => {
      console.log(res);
    })
  }

})
const entersmall = () => {
  router.push({
    name: "smallcontroller",
    query: {
      number: route.query.processnum % 8 != 0 ? Math.floor(route.query.processnum / 8) : route.query.processnum / 8 - 1
    }
  })
}
const open = () => {

}
</script>

<style lang="scss" scoped>
.process1 {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url('@/static/processback.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

  .baoxiang {
    width: 30rem;
    height: 20rem;

    &.disappear {
      animation: fadeOut 0.5s forwards;
    }
  }

  .roate {
    animation: rotate 1s infinite;
  }


  .awardword {
    // position: absolute;

    margin: 0 auto;
    border: #875a44 solid 4px;
    font-size: 3rem;
    background-color: #fbe8a3;
  }
}
</style>
